<template>
	<view class="">
		<view class="main-wrap" :class="{ show: loaded }">
			<view class="b-t top-money column center">
				<view class="">需支付金额(元)</view>
				<view class=""><mix-price-view :price="money" :size="70" fontColor="#FE2525"></mix-price-view></view>
			</view>
			<view class="p-con">
				<view class="b-b" style="padding: 20upx 0 30upx 0;color: #666666;">支付方式</view>
				<view class="row between pay-item b-b" v-for="(item, index) in list" :key="index" @tap="current = index">
					<view class="row">
						<image :src="item.icon" mode="" class="pay-icon"></image>
						<text style="color: #000000;">{{ item.name }}</text>
					</view>
					<u-icon name="/static/img/wcx.png" size="44" v-if="current == index"></u-icon>
					<u-icon name="/static/img/wcm.png" size="44" v-else></u-icon>
				</view>
			</view>
			<view class="footer-btn column center">
				<view class="f-btn" hover-class="hover-opacity" @tap="pay">立即支付</view>
				<view class="row" style="margin-top: 40upx;">
					<u-icon name="/static/img/wxcl.png" size="38"></u-icon>
					<text style="font-size: 24upx;color: #999999;margin-left: 10upx;">已阅读并同意</text>
					<view style="font-size: 24upx;color: #000000;" @tap="show = true">《免责说明》</view>
				</view>
			</view>
			<u-popup v-model="show" mode="center" borderRadius="20" close-icon="close-circle" closeIconColor="#ffffff">
				<view class="u-con">
					<view class="u-top-f">免责说明</view>
					<view class="scroll-view-con">
						<scroll-view scroll-y class="scroll-view">
							<view class="">
								<rich-text :nodes="content"></rich-text>
							</view>
						</scroll-view>
					</view>
					<view class="u-b-btn row center"><view class="u-btn" @tap="show = false">我已知晓</view></view>
				</view>
			</u-popup>
		</view>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>
<script>
import mixPriceView from '@/components/mix-price-view/mix-price-view.vue';
import orderMixins from '@/common/mixin/order.js';
export default {
	mixins:[orderMixins],
	components: {
		mixPriceView
	},
	data() {
		return {
			id:"",
			money:"",
			content:"",
			show: false,
			current: 0,
			list: [{ icon: '/static/img/weixinzhifu.png', name: '微信支付' }, { icon: '/static/img/huiyuanzhifu.png', name: '会员支付' }]
		};
	},
	onLoad(options) {
		this.id = options.id;
		this.money = options.money;
		this.getPayCount();
	},
	methods: {
		async getPayCount() {
			const res = await this.$request('content/text', { type: 0 }, { showLoading: true });
			if (res.result == 0) {
				this.content = res.data.content;
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		pay() {
			console.log(this.current);
			if(this.current==0){
				this.payByWx({orderId:this.id})
			}else{
				this.payByBalance({orderId:this.id});
			}
			
		}
	}
};
</script>
<style>
page {
	background: #f6f6f6;
}
</style>
<style scoped lang="scss">
.top-money {
	height: 266upx;
	background: #ffffff;
}
.p-con {
	margin: 20upx 0;
	background: #ffffff;
	padding: 30upx;
}
.pay-icon {
	width: 40upx;
	height: 37upx;
	margin-right: 20upx;
}
.pay-item {
	padding: 30upx 0;
}
.footer-btn {
	margin: 100upx auto;
}
.f-btn {
	width: 710upx;
	height: 88upx;
	text-align: center;
	line-height: 88upx;
	background: #2781a7;
	border-radius: 44upx;
	font-size: 30upx;
	color: #ffffff;
}
.u-con {
	width: 624upx;
	background: #2781a7;
	border-radius: 20upx;
	overflow: hidden;
	position: relative;
}
.u-top-f {
	height: 100upx;
	line-height: 100upx;
	text-align: center;
	position: absolute;
	top: 0;
	width: 100%;
	font-size: 32upx;
	font-weight: bold;
	color: #ffffff;
}
.scroll-view-con {
	padding: 100upx 52upx 0;
}
.scroll-view {
	background: #93c2d6;
	border-radius: 20upx;
	max-height: 645upx;
	padding: 30upx;
	overflow: hidden;
}
.u-b-btn {
	height: 100upx;
	width: 100%;
}
.u-btn {
	width: 261upx;
	height: 67upx;
	text-align: center;
	line-height: 67upx;
	border: 1px solid #ffffff;
	border-radius: 34upx;
	font-size: 30upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffffff;
}
</style>
